<template>
    <div>
        <city-header></city-header>
        <city-search :cities='cities'></city-search>
        <city-list 
            :hotCities='hotCities'
            :cities='cities' 
            :cityFname='cityFname'
        ></city-list>
        <city-alpha :cities='cities' @wordChange='showWord'></city-alpha>
    </div>
</template>
<script>
import axios from 'axios'
import cityHeader from './componets/cityHeader'
import citySearch from './componets/citySearch'
import cityList from './componets/cityList'
import cityAlpha from './componets/cityAlpha'


export default {
    name:'City',
    data() {
        return {
            hotCities:[],
            cities:{},
            cityFname:''
        }
    },
    components:{
        cityHeader,citySearch,cityList,cityAlpha
    },
    
    mounted() {
        this.getCityInfo()
    },
    methods: {
        getCityInfo(){
            axios.get('/api/city.json?city').then(this.getCityInfoSucc)
        },
        getCityInfoSucc(res){
            res=res.data
            if(res.ret&&res.data){
                let data=res.data
                this.hotCities=data.hotCities
                this.cities=data.cities
            }
        },
        //接受cityAlpha传递的点击 字母
        showWord(e){
            this.cityFname=e
        }
    },

}
</script>
<style lang="stylus" scoped>
    
</style>